/* components */
import { 
  ChatAIInputBar,
  ChatAIAppTag,
  ChatAIPromptTag
} from '@src/component/business/BizChatPanel/chat/components'
/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* vue */
import { defineComponent, PropType } from "vue";
/* scss */
import "@gpt/components/prompt-word/index.scss";
/* types */
import { SettingGPTPromptWordItem } from "@gpt/types";
/* util */
import { getLocalesOssUrl } from '@src/util/assets'

type ChatAIInputBarComponent = InstanceType<typeof ChatAIInputBar>

const xiaoBaoIcon = getLocalesOssUrl('/xiao-bao-icon.png')

enum SettingGPTPromptWordPreviewEventEnum {
  Change = 'change',
  Click = 'click'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTPromptWordPreview,
  emits: [
    SettingGPTPromptWordPreviewEventEnum.Change,
    SettingGPTPromptWordPreviewEventEnum.Click
  ],
  props: {
    appName: {
      type: String,
      default: ''
    },
    value: {
      type: Array as PropType<SettingGPTPromptWordItem[]>,
      default: () => []
    },
    onChange: {
      type: Function
    }
  },
  data() {
    return {
      
    }
  },
  computed: {
    className(): string {
      return ComponentNameEnum.SettingGPTPromptWordPreview
    },
    classNames(): Record<string, boolean> {
      return {
        [ComponentNameEnum.SettingGPTPromptWordPreview]: true
      }
    },
    chatAIInputBarComponent(): ChatAIInputBarComponent {
      return this.$refs.ChatAIInputBar as ChatAIInputBarComponent
    }
  },
  methods: {
    onPromptTagClickHandler(value: string) {
      this.chatAIInputBarComponent.onInputHandler(value)
    },
    renderHeader() {
      return (
        <div class={`${this.className}-header`}>
          <div class={`${this.className}-header-title`}>
            
            <el-image
              class="avatar"
              src={xiaoBaoIcon}
            />
            
            <span>
              小宝AI
            </span>
            
          </div>
          <div class={`${this.className}-header-icon`}>
            <i class="iconfont icon-fe-close"></i>
          </div>
        </div>
      )
    },
    renderContent() {
      return (
        <div class={`${this.className}-content`}>
          <div class={`${this.className}-content-top`}>
          </div>
          <div class={`${this.className}-content-bottom`}>
            {this.renderAppList()}
            {this.renderPromptWordList()}
            {this.renderInputBar()}
          </div>
        </div>
      )
    },
    renderAppList() {
      return (
        <div class={`${this.className}-content-app-list`}>
          <ChatAIAppTag
            value={this.appName}
          />
        </div>
      )
    },
    renderPromptWordList() {    
      return (
        <div class={`${this.className}-content-prompt-word-list`}>
          {this.value.map((item, index) => {
            
            const onClickHandler = () => {
              this.onPromptTagClickHandler(item.content)
            }
            
            return (
              <ChatAIPromptTag
                label={item.title}
                value={item.content}
                onClick={onClickHandler}
              />
            )
          })}
        </div>
      )
    },
    renderInputBar() {
      return (
        <ChatAIInputBar 
          ref="ChatAIInputBar"
        />
      )
    }
  },
  render() {
    return (
      <div class={this.classNames}>
        {this.renderHeader()}
        {this.renderContent()}
      </div>
    )
  }
});